import React, { useState, useEffect } from 'react';
import { Table, Button, notification, Popconfirm } from 'antd';
import {
  SettingOutlined,
  PlusCircleFilled,
  LockOutlined,
  DeleteFilled,
  UnlockOutlined,
} from '@ant-design/icons';
import CreateModal from './createModal';
import API from '@/api';
import MenuModal from './menuModal';
import { showDeleteConfirm } from '@/utils/util';

const roleManagement = () => {
  const [visible, setVisible] = useState(false);
  const [menuVisible, setMenuVisible] = useState(false);
  const [id, setId] = useState(null);
  const [list, setList] = useState([]);
  const initList = () => {
    API.selectListPage({}).then((res) => {
      if (res?.t) {
        setList(res.t);
      }
    });
  };
  useEffect(() => {
    initList();
  }, []);
  const setFn = (id) => {
    setMenuVisible(true);
    setId(id);
  };
  const columns = [
    {
      title: '角色名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '角色描述',
      dataIndex: 'info',
      align: 'center',
    },
    {
      title: '是否可修改',
      dataIndex: 'immutable',
      align: 'center',
      render: (text) => (text === 0 ? '否' : '是'),
    },
    {
      title: '状态',
      dataIndex: 'state',
      align: 'center',
      render: (text) =>
        text === 2 ? (
          <span style={{ color: 'red' }}>禁用</span>
        ) : (
          <span style={{ color: 'green' }}>启用</span>
        ),
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      align: 'center',
      render: (text, r) => (
        <>
          <Button
            type="link"
            icon={<SettingOutlined />}
            className="table-icon"
            onClick={() => setFn(r.id)}
          ></Button>

          {r.immutable === 0 ? (
            ''
          ) : (
            <>
              <Popconfirm
                title={'是否确定' + (r.state === 1 ? '禁用' : '启用') + '?'}
                okText="是"
                cancelText="否"
                onConfirm={() => freezeFn(r)}
              >
                <Button
                  type="link"
                  icon={r.state === 1 ? <LockOutlined /> : <UnlockOutlined />}
                  className="table-icon"
                ></Button>
              </Popconfirm>

              <Button
                type="link"
                icon={<DeleteFilled />}
                className="table-icon"
                onClick={() => showDeleteConfirm(() => delFn(r.id))}
              ></Button>
            </>
          )}
        </>
      ),
    },
  ];
  const createLink = () => {
    setVisible(true);
  };
  const cancelFn = () => {
    setVisible(false);
  };
  const menuCreate = (values) => {
    const params = {
      ids: values.join(','),
      roleId: id + '',
    };
    API.updateRolePermission(params).then((res) => {
      if (res) {
        notification.success({
          message: res.desc,
        });
      }
    });
    menuCancelFn();
  };
  const menuCancelFn = () => {
    setMenuVisible(false);
    setId(null);
  };
  const freezeFn = (r) => {
    const state = r.state === 1 ? 2 : 1;
    API.updateStateById({
      state,
      id: r.id,
    }).then((res) => {
      if (res) {
        notification.success({
          message: (state === 1 ? '启用' : '禁用') + '成功',
        });
        initList();
      }
    });
  };
  const delFn = (id) => {
    API.delRoleById({ id }).then((res) => {
      if (res) {
        notification.success({
          message: '删除成功',
        });
        initList();
      }
    });
  };
  const onCreate = (values) => {
    API.insert(values).then((res) => {
      if (res) {
        notification.success({
          message: '新增成功',
        });
        setVisible(false);
        initList();
      }
    });
  };
  return (
    <>
      <div className="bgf main-x">
        <div className="tools-x">
          <Button
            type="link"
            icon={<PlusCircleFilled />}
            className="btn-icon"
            onClick={createLink}
          >
            新增
          </Button>
        </div>
        <Table
          className="custom-table"
          columns={columns}
          rowKey="id"
          dataSource={list}
          pagination={false}
        ></Table>
      </div>
      <CreateModal
        visible={visible}
        onCreate={onCreate}
        onCancel={cancelFn}
      ></CreateModal>
      <MenuModal
        id={id}
        visible={menuVisible}
        onCreate={menuCreate}
        onCancel={menuCancelFn}
      ></MenuModal>
    </>
  );
};

export default roleManagement;
